<template>
    <div>
        <basic-container>
            <div class="viewTop">
                <h2>
                    产品：{{list.productName}}
                    <p></p>
                </h2>
                <div class="viewModule">
                    <p><span>设备数量:</span>{{  list.count}}</p>
                </div>
               
            </div>
        </basic-container>
        <basic-container>
            <div class="tab">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="产品信息" name="first">
                        <product-information :listinfo="list" v-if='isShow'></product-information>
                        </el-tab-pane>
                        <el-tab-pane label="属性定义" name="second">
                            <attdef :productId="list.productId" v-if='isShow'></attdef>
                        </el-tab-pane>
                    </el-tabs>
                </div>
        </basic-container>
    </div>
</template>
<script>
import ProductInformation from './components/product-information'
import attdef from './components/attdef'
import {getProduct } from '@/api/business/product/product'
export default {
    data(){
        return{
            isShow: false,
            activeName: 'first',
            list: '',
            productId: this.$route.query.productId,
            title: '确定启用？'
            
        }
    },
    computed:{
    },
    components: { 
       ProductInformation,
       attdef
    },
    created(){
        this.fetchBasic()
    },
    methods:{
        //产品详情
        async fetchBasic(){
            const res = await getProduct(this.productId)
            if(res.code == 200){
                this.list = res.data
                this.isShow = true
            }
        },
        //编辑
        editMode(){
            this.$refs.drawer.drawer = true
        },
        //应用配置
        setSetting(){
            const self = this
             self.$confirm(this.title, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                if(self.list.released == true){
                    self.unRelease()
                }else{
                    self.release()
                }
            }) 
        },
        handleClick(tab, event) {
            console.log(tab, event);
        }
    }
}
</script>
<style lang="scss" scoped>
.viewTop{
    padding: 0 20px;
    h2{
        display: flex;
        align-items: center;
        font-size: 18px;
        p{
            font-weight: normal;
            font-size: 14px;
            padding-left: 20px;
            position: relative;
            i{
                position: absolute;
                top: 5px;
                width: 6px;
                height: 6px;
                border-radius: 50%;
                display: block;
                &.red{
                    background: #f5222d;
                }
                &.green{
                    background: #52c41a;
                }
            }
            span{
                padding-left: 16px;
            }
        }
    }
    .viewModule{
        display: flex;
        align-items: center;
        p{  
            width: 20%;
            font-size: 14px;
            a{
                color: #1890ff;
                padding-left: 10px;
            }
        }
    }
}
.viewDetail{
    font-size: 14px;
    padding: 0 0 20px 0;
    h2{
        color: rgba(0, 0, 0, 0.85);
        font-weight: bold;
        font-size: 16px;
        line-height: 1.5;
        margin-bottom:20px;
    }
    h3{
        font-weight: normal;
        margin-bottom: 20px;
    }
    table{
        width: 100%;
        color: rgba(0, 0, 0, 0.85);
        border: solid 1px #e8e8e8;
        border-collapse: collapse;
        text-align: left;
        th,td{
            height: 40px;
            font-weight: normal;
        }
        td{
            padding-left: 15px;
        }
        th{
            padding: 8px 16px;
            background: #fafafa;

        }
    }
}
.viewSetting{
    width: 260px;
    height: 80px;
    line-height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    h2{
        margin-top: 16px;
    }
}
</style>
